<template>
  <div>
    <van-nav-bar
        title="事件详情"
        left-text="返回"
        left-arrow
        :safe-area-inset-top="true"
        @click-left="onClickLeft"
    />

    <!--    <van-row class="backg">-->
    <!--      <van-col span="24" class="font-14">-->
    <!--        事件剩余处理时间：-->
    <!--        <van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" />-->
    <!--      </van-col>-->
    <!--      <van-col span="24" class="backg-c">-->
    <!--        <van-col span="8" class="event-img">-->
    <!--          <van-image width="100%" height="110" src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3538158226,2065046186&fm=26&gp=0.jpg" />-->
    <!--        </van-col>-->
    <!--        <van-col span="16" class="event-padding">-->
    <!--          <van-col span="24" class="font-14">-->
    <!--            出店经营-->
    <!--          </van-col>-->
    <!--          <van-col span="24" class="font-12">-->
    <!--            <van-image class="" width="10" height="10" :src="require('@/assets/img/icon-06.png')" /> 福建沙县小吃-->
    <!--          </van-col>-->
    <!--          <van-col span="24" class="font-12">-->
    <!--            <van-image class="" width="10" height="10" :src="require('@/assets/img/icon-18.png')" /> 江滨中路180号附近-->
    <!--          </van-col>-->
    <!--          <van-col span="24" class="font-12">-->
    <!--            <van-image class="" width="10" height="10" :src="require('@/assets/img/icon-19.png')" /> 2020-11-26 12:40:55-->
    <!--          </van-col>-->
    <!--        </van-col>-->
    <!--      </van-col>-->
    <!--    </van-row>-->

    <van-row class="backg">
      <van-col span="24" class="font-14">
        事件剩余处理时间：
<!--        <van-count-down @change="daoji" :time="time" format="DD 天 HH 时 mm 分 ss 秒"/>-->
      </van-col>
      <van-col span="24" class="title-column">
        <van-image class="title-img" width="10" height="12" :src="require('@/assets/img/column-icon.png')"/>
         待处理事件
      </van-col>
      <van-col span="24" class="event-details-img">
        <van-image width="100%" height="200"
                   v-bind:src="appHkevent.eventImage"/>
      </van-col>


      <van-col span="24">
        <van-cell-group class="backg-c-border">
          <van-cell v-if="appHkevent.eventTypeName=='出店经营'" title="关联店铺" :value="appHkevent.placeTypeName" />
          <van-cell v-else  title="关联地点" :value="appHkevent.cameraName" />
          <van-cell title="所属辖区" :value="appHkevent.regionName"/>
          <van-cell title="事件地点" :value="appHkevent.cameraName"/>
          <van-cell title="事件类型" :value="appHkevent.eventTypeName"/>
          <van-cell title="上报时间" :value="appHkevent.reportTime"/>
        </van-cell-group>
      </van-col>

      <van-col span="24" v-for="(item, index) in recordList" :key="index">
        <van-cell-group class="backg-c-border">
          <van-cell title="审核结果" :value="item.handlerContent"/>
          <!--<van-cell title="是否街道养护单位负责" value="否" />-->
          <van-cell title="审核人"   :value="item.handlerName"/>

          <van-cell title="审核时间" :value="item.updateTime"/>
        </van-cell-group>
      </van-col>

      <van-col span="12" class="btn-center">
        <!--<router-link to="/Event">-->
        <van-button type="info" class="van-button--info-bg" @click="SignFor" v-if="wang!='wanceng'">签收</van-button>
        <!-- </router-link>-->

        <van-dialog v-model="show" show-cancel-button>

        </van-dialog>
<!--        class="float_button"-->
        <div class="float_button">
          <div

              @click="onBtnClicked"
              ref="floatButton"
              class="float_info"
              :style="{'width': itemWidth + 'px', 'height': itemHeight + 'px', 'left': left + 'px', 'top': top + 'px'}"
          >
           <img   @click="fenxiang" src="../assets/img/weixin.png" alt="" srcset="" >
          </div>
        </div>

      </van-col>
      <van-col span="12" class="btn-center" v-if="wang!='wanceng'">

       <van-button plain type="info" @click="showPopup"  >退回</van-button>
        <van-dialog v-model="show" show-cancel-button :beforeClose="beforeClose">
          <van-field
              v-model="message"
              rows="3"
              autosize
              type="textarea"
              maxlength="150"
              placeholder="请填写退回原因"
              show-word-limit
          />
        </van-dialog>
      </van-col>
    </van-row>

  </div>
</template>

<script>
import {Dialog, Toast} from "vant";

export default {
  data() {
    return {
      clientWidth: 0,
      clientHeight: 0,
      timer: null,
      currentTop: 0,
      left: 0,
      top: 0,
      time: 30 * 60 * 60 * 1000,
      show: false,
      message: '',
      appHkevent: "",
      recordList: [],
      eventId: "",
      wang:'',
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link', description: '描述信息' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
      ],
    };
  },

  created() {
    this.clientWidth = document.documentElement.clientWidth
    this.clientHeight = document.documentElement.clientHeight
    this.left = this.clientWidth - this.itemWidth - this.gapWidth
    this.top = this.clientHeight * this.coefficientHeight

    this.eventId = this.$route.query.eventId;
    this.wang = this.$route.query.wang;

    this.exhibition();
    if (window.plus) {
      this.plusReady()
    } else {
      document.addEventListener('plusready', this.plusReady, false)
    }
    let t = this  //因为用的vue框架，这里需要用到this ，如果没有用可注释
    plus.share.getServices(function(e) {
      t.shareData = e　　　　　　　　//这个回调函数的参数 e 就包含了 所有对象的数组

      //在这个数组里 找到属于微信的对象 循环匹配查找
      for(var i in e){
        if('weixin' == e[i].id){
          t.sharewx = e[i]　　//保存到变量里 （之后即可使用该对象发起分享）
        }
      }
    })

  },
  props: {
    itemWidth: {            // 悬浮按钮宽度
      type: Number,
      default: 40
    },
    itemHeight: {           // 悬浮按钮高度
      type: Number,
      default: 50
    },
    gapWidth: {             // 距离左右两边距离
      type: Number,
      default: 0
    },
    coefficientHeight: {    // 从上到下距离比例
      type: Number,
      default: 0.55
    }
  },
    methods: {
      /**
       * 获取微信分享通道
       */
      plusReady () {
        var ws = plus.webview.currentWebview(); //pw回车可输出plus.webview
        console.log("hello plus");
      },


      fenxiang(){
        Dialog.alert({
          message: '确认将该事件分享至微信吗？',
          showCancelButton:true,
        }).then(() => {
          let t = this  //因为用的vue框架，这里需要用到this ，如果没有用可注释
          plus.share.getServices(function(e) {
            t.shareData = e　　　　　　　　//这个回调函数的参数 e 就包含了 所有对象的数组

            //在这个数组里 找到属于微信的对象 循环匹配查找
            for(var i in e){
              if('weixin' == e[i].id){
                t.sharewx = e[i]　　//保存到变量里 （之后即可使用该对象发起分享）
              }
            }
          })
          let msg = {
            type: 'web',　　//分享的内容的类型
            title: this.appHkevent.eventTypeName,
            content: this.appHkevent.regionName+'辖区,'+'地点:'+this.appHkevent.cameraName+'有'+appHkevent.eventTypeName+'事件' ,
            thumbs: [this.appHkevent.eventImage],
            href: '#',
            extra:{scene:"WXSceneSession"} // 'WXSceneSession'分享给好友，'WXSceneTimeline'分享到朋友圈
          }

          //msg对象的属性和参数 官方文档里有说明
          //这里就用到了上面获取到的 微信对象 使用send发起分享
          t.sharewx.send(msg, function() {
            Toast.success('分享成功');
          },function(error) {
            Toast.fail('分享成功');
            console.log(error)
          })
        });
      },


      onBtnClicked(){
        this.$emit("onFloatBtnClicked")
      },
      handleScrollStart() {
        this.timer && clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.handleScrollEnd()
        }, 300)
        this.currentTop = document.documentElement.scrollTop || document.body.scrollTop
        if(this.left > this.clientWidth / 2) {
          this.left = this.clientWidth - this.itemWidth / 2
        } else {
          this.left = -this.itemWidth / 2
        }
      },
      handleScrollEnd(){
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
        if(scrollTop === this.currentTop) {
          if(this.left > this.clientWidth/2) {
            this.left = this.clientWidth - this.itemWidth - this.gapWidth
          } else {
            this.left = this.gapWidth
          }
          clearTimeout(this.timer)
        }
      },
      mounted() {
        this.$nextTick(() => {
          const floatButton = this.$refs.floatButton
          floatButton.addEventListener("touchstart", () => {
            floatButton.style.transition = 'none'
          })

          // 在拖拽的过程中，组件应该跟随手指的移动而移动。
          floatButton.addEventListener("touchmove", (e) => {
            console.log('移动中', e)
            if (e.targetTouches.length === 1) {
              let touch = e.targetTouches[0]
              this.left = touch.clientX - 20
              this.top = touch.clientY - 25
            }
          })

          // 拖拽结束以后，重新调整组件的位置并重新设置过度动画。
          floatButton.addEventListener("touchend", () => {
            floatButton.style.transition = 'all 0.3s'
            if(this.left > document.documentElement.clientWidth / 2) {
              this.left = document.documentElement.clientWidth - 40
            }else{
              this.left = 0
            }
          })
        })
      },
      beforeDestroy(){
        // 添加监听页面滚动
        window.removeEventListener('scroll', this.handleScrollStart)
      },
      destroyed() {},

      showPopup() {
      this.show = true;

    },
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    //事件签收
    SignFor() {
      console.log("数据展示");
      var userId =  localStorage.getItem("userId");
      console.log(userId);
      this.$http
          .post("http://139.224.226.216:8083/appEventDetali/SignFor?eventId=" + this.eventId + "&userId=" + userId)
          .then((res) => {
            console.log(res);
            if (res.data.code == 500) {
              Toast("事件签收失败");

            } else if (res.data.code == 0) {
              Toast("事件签收成功！");
              this.$router.push("/Event?eventId=" + this.eventId);
            } else {
              Toast("非法操作！");
            }
          })
          .catch((err) => {
            Toast("网络错误" + err);
          });
    },
    //事件退回
    beforeClose(action,done) {
      if (action === 'confirm') {
        var userId = localStorage.getItem("userId");
        var eventId = this.$route.query.eventId;
        var eventType = this.appHkevent.eventType;
        console.log(eventId);
        console.log(userId);
        console.log(eventType);
        console.log(this.message);
        var info = {
          "handlerUserId": userId,
          "eventId": eventId,
          "eventType": eventType,
          "handlerContent": this.message
        }
        this.$http.post("http://139.224.226.216:8083/appEventDetali/returnEventInfo", info)
            .then((res) => {
              console.log(res);
              if (res.data.code == 500) {
                Toast("事件退回失败");
                this.show=false;
                done();
              } else if (res.data.code == 0) {
                Toast("事件退回成功");
                this.$router.replace('/Remind')

              } else {
                Toast("非法操作！");
              }
            })
            .catch((err) => {
              // Toast("网络错误" + err);
              console.log(err);
            });
      } else if (action === 'cancel') {
        this.$router.go(0)
      }
    },
    //倒计时
    daoji(){
       var userId = localStorage.getItem("userId");
      this.$http
          .post(
              "http://139.224.226.216:8083/appEventDetali/appNowEventDetali?userId=" + userId +
              "&eventId=" + this.eventId
          )
          .then((res) => {
             console.log("倒计时=>");

            if (res.data.code == 0 && res.data.data != "undefined") {
              if (res.data.data.data.appHkevent!=null){
                this.time = res.data.data.data.appHkevent.pengTime*1000;
              }else{
                this.time = res.data.data.appHkevent.pengTime*1000;
              }
            }
          })
          .catch((err) => {
            // Toast("网络错误" + err);
            console.log(err);
          });
    },
    //数据加载
    exhibition(){
      var userId = localStorage.getItem("userId");
      console.log(userId);
      this.$http
          .post(
              "http://139.224.226.216:8083/appEventDetali/appNowEventDetali?userId=" + userId +
              "&eventId=" + this.eventId
          )
          .then((res) => {
            console.log("事件详情res数据");
            console.log(res);
            if (res.data.code == 0 && res.data.data != null) {
              console.log(res.data.data.appHkevent);
              console.log(res.data.data.recordList);

              this.appHkevent = res.data.data.appHkevent;
              this.recordList = res.data.data.recordList;
              console.log("list的值:");
              console.log(this.recordList);

              if (this.appHkevent==null){
                console.log("listssss的值:");
                console.log(res);
                this.appHkevent = res.data.data.data.appHkevent;
                this.time = res.data.data.data.appHkevent.pengTime*120;
                if (res.data.data.data.appHkevent.eventAlertStatus==5) {
                  console.log("跳转到Event1");
                  this.$router.push("/Event?eventId=" + this.eventId + "&Intdex=2");
                  return;
                }


              }
              if (res.data.data.appHkevent.eventAlertStatus==5){

                console.log("跳转到Event1");
                this.$router.push("/Event?eventId=" + this.eventId +"&Intdex=0");
                return;
              }

              if (this.recordList==null){
                this.recordList = res.data.data.data.recordList;
                this.time = res.data.data.data.appHkevent.pengTime*120;
              }


              }

          })
          .catch((err) => {
            // Toast("网络错误" + err);
            console.log(err);
          });
    },
  },
};
</script>


<style lang="less">
.float_button {
  .float_info{
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
    color: #666666;
    transition: all 0.3s;
    position: fixed;
    bottom: 436px;
    right: 0;
    width: 80px;
    height: 100px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    z-index: 999;
    border-radius: 14px;
    cursor: pointer;
    .text{
      font-size: 24px;
      color: #fff;
    }
    img{
      width: 44px;
      height: 44px;
    }
  }
}
</style>